<template>
  <div style="min-height: 2000px">
    <div class="_box0">
      <div class="stitle">· 指令参数 ·</div>
      <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
        <n-gi span="2">
          <div class="_banr">
            <div class="_2_title2" style="width: 85px">
              <div>指令名：</div>
            </div>
            <div class="_2_val">
              <n-input placeholder="响应的指令名称" v-model:value="data.msname" />
            </div>
          </div>
        </n-gi>

        <n-gi span="2">
          <div class="_banr">
            <div class="_2_title2" style="width: 85px">
              <div>指令提示：</div>
            </div>
            <div class="_2_val">
              <n-input placeholder="显示在帮助菜单中的提示语" v-model:value="data.tips" />
            </div>
          </div>
        </n-gi>
        <n-gi span="2">
          <div class="_banr">
            <div class="_2_title2" style="width: 85px">
              <div>指令排序：</div>
            </div>
            <div class="_2_val">
              <n-input-number
                placeholder="在帮助菜单中的排序大小 越小越靠前"
                v-model:value="data.fpx"
              />
            </div>
          </div>
        </n-gi>
        <n-gi span="1">
          <div class="_banr">
            <div class="_2_title2" style="width: 85px">
              <div>主分类：</div>
            </div>
            <div class="_2_val">
              <n-select
                to=".v1_body"
                v-model:value="data.msgroup"
                @update:value="set.edit_v2type(data.msgroup, data)"
                :options="set.select_mstype"
              />
            </div>
          </div>
        </n-gi>
        <n-gi span="1">
          <div class="_banr">
            <div class="_2_title2" style="width: 85px">
              <div>子分类：</div>
            </div>
            <div class="_2_val">
              <n-select
                to=".v1_body"
                v-model:value="data.ftype"
                :options="edit_typeopt"
                remote
              />
            </div>
          </div>
        </n-gi>
        <n-gi span="2">
          <div class="_banr">
            <div class="_2_title2" style="width: 85px">
              <div>额外设置：</div>
            </div>
            <div class="_2_val">
              <n-space>
                <div class="_s2set">
                  菜单隐藏
                  <n-switch
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model:value="data.hide"
                  />
                </div>
                <div class="_s2set">
                  全局禁用
                  <n-switch
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model:value="data.cmdban"
                  />
                </div>
                <div class="_s2set">
                  官机禁用
                  <n-switch
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model:value="data.cmdban_gf"
                  />
                </div>
                <div class="_s2set">
                  非官禁用
                  <n-switch
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model:value="data.cmdban_ob"
                  />
                </div>
                <div class="_s2set">
                  测试专用
                  <n-switch
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model:value="data.cmd_test"
                  />
                </div>
              </n-space>
            </div>
          </div>
        </n-gi>
      </n-grid>
    </div>
    <div class="_box0">
      <div class="stitle">
        · 额外指令 ·
        <n-button @click="func.push_trigger(data)" size="small">+ 添加</n-button>
      </div>
      <div style="display: flex; flex-direction: column; gap: 8px">
        <template v-for="(item, key) in data.trigger">
          <div class="_banr">
            <n-input v-model:value="data.trigger[key]" />
          </div>
        </template>
      </div>
    </div>
    <div class="_box0">
      <div class="stitle">· 响应指令 ·</div>
      <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
        <n-gi span="2">
          <div class="_banr">
            <div class="_2_title2" style="width: 85px">
              <div>指令类型：</div>
            </div>
            <div class="_2_val">
              <n-select
                :options="set.select_cmdtype"
                v-model:value="data.mstype"
                @update:value="func.mstype_ck(data.mstype, data)"
              />
            </div>
          </div>
        </n-gi>

        <!-- 攻略图片 -->
        <template v-if="data.mstype == 'gtgl_img'">
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">响应攻略：</div>
              <div class="_2_val">
                <div style="margin-bottom: 8px">
                  <n-select
                    :options="seacmd_options"
                    filterable
                    remote
                    placeholder="输入攻略名称后开始搜索攻略"
                    v-model:value="data.seacmd_text"
                    :loading="data.seacmd_loading"
                    @search="set.sea_gtgl"
                    @update:value="func.sea_gtgl_ck"
                  />
                </div>
                <div class="_cmdefl"><span>分类：</span>{{ data.data[0] }}</div>
                <div class="_cmdefl"><span>攻略：</span>{{ data.data[1] }}</div>
              </div>
            </div>
          </n-gi>
        </template>

        <!-- 攻略图片+文字 -->
        <template v-if="data.mstype == 'gtgl_img_text'">
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">响应攻略：</div>
              <div class="_2_val">
                <div style="margin-bottom: 8px">
                  <n-select
                    :options="seacmd_options"
                    filterable
                    remote
                    placeholder="输入攻略名称后开始搜索攻略"
                    v-model:value="data.seacmd_text"
                    :loading="data.seacmd_loading"
                    @search="set.sea_gtgl"
                    @update:value="func.sea_gtgl_ck"
                  />
                </div>
                <div class="_cmdefl"><span>分类：</span>{{ data.data[0] }}</div>
                <div class="_cmdefl"><span>攻略：</span>{{ data.data[1] }}</div>
              </div>
            </div>
          </n-gi>
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">响应内容</div>
              <div class="_2_val">
                <n-input
                  v-model:value="data.data[2]"
                  type="textarea"
                  placeholder="要发送的文本内容"
                  :autosize="{
                    minRows: 5,
                    maxRows: 10,
                  }"
                />
              </div>
            </div>
          </n-gi>
        </template>

        <!-- 纯文本 -->
        <template v-if="data.mstype == 'text'">
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">响应内容</div>
              <div class="_2_val">
                <n-input
                  v-model:value="data.data"
                  type="textarea"
                  placeholder="要发送的文本内容"
                  :autosize="{
                    minRows: 5,
                    maxRows: 10,
                  }"
                />
              </div>
            </div>
          </n-gi>
        </template>

        <!-- 图片链接+文本 -->
        <template v-if="data.mstype == 'imgtext'">
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">图片链接</div>
              <div class="_2_val">
                [ 多个图片链接可用 A,B,C ] [ 特殊代码：hostapi sender]
                <n-input
                  v-model:value="data.data[0]"
                  type="textarea"
                  placeholder="要发送的图片链接"
                  :autosize="{
                    minRows: 5,
                    maxRows: 10,
                  }"
                />
              </div>
            </div>
          </n-gi>
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">响应文本</div>
              <div class="_2_val">
                <n-input
                  v-model:value="data.data[1]"
                  type="textarea"
                  placeholder="要发送的文本内容"
                  :autosize="{
                    minRows: 5,
                    maxRows: 10,
                  }"
                />
              </div>
            </div>
          </n-gi>
        </template>

        <!-- 图片链接 -->
        <template v-if="data.mstype == 'imgurl'">
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">图片链接</div>
              <div class="_2_val">
                [ 多个图片链接可用 A,B,C ] [ 特殊代码：hostapi sender]
                <n-input
                  v-model:value="data.data"
                  type="textarea"
                  placeholder="要发送的图片链接"
                  :autosize="{
                    minRows: 5,
                    maxRows: 10,
                  }"
                />
              </div>
            </div>
          </n-gi>
        </template>
      </n-grid>
    </div>
  </div>
</template>
<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    set: {
      type: Object,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    edit_typeopt: {
      type: Array,
      required: true,
    },
    seacmd_options: {
      type: Array,
    },
  },
  setup(props) {
    const set = props.set;
    const data = props.data;
    const func = {
      push_trigger: (d) => {
        if (d.trigger == null) {
          d.trigger = [null];
        } else {
          d.trigger.push(null);
        }
        return;
      },
      sea_gtgl_ck: async (d) => {
        data.data[0] = d.n_dir;
        data.data[1] = d.n_name;
      },
      mstype_ck: (type, d) => {
        if (type == "gtgl_img") {
          d.data = [];
          return;
        }
        if (type == "gtgl_img_text") {
          d.data = [];
          return;
        }
        if (type == "text") {
          d.data = "";
          return;
        }
        if (type == "imgurl") {
          d.data = "";
          return;
        }
        if (type == "imgtext") {
          d.data = [];
          return;
        }
      },
    };
    set.edit_v2type(null, data);
    return { cfg, func };
  },
};
</script>
